<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>投票结果</title>
    <style type="text/css">
    	.checkbox label{
    		padding-left: 0;
    	}
    	.radio label{
    		padding-left: 0;
    	}
    </style>
</head>
<body>

	<!-- 菜单及导航数据  -->
    <data id="info" nav="vote" menu="voteResult" service="投票服务" action="投票结果">
    
	<!-- 业务部分  开始  -->
    <div class="row wrapper white-bg animated fadeInRight min-height">
       <div class="row">
         <div class="col-lg-12">
             <div class="ibox float-e-margins">
                 <div class="ibox-title">
                     <h5>投票结果查看<small class="text-navy"> 查看本次投票的情况</small></h5>
                     <div class="ibox-tools">
                         <a class="collapse-link">
                             <i class="fa fa-chevron-up"></i>
                         </a>
                         <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                             <i class="fa fa-wrench"></i>
                         </a>
                         <ul class="dropdown-menu dropdown-user">
                             <li><a href="#">Config option 1</a>
                             </li>
                             <li><a href="#">Config option 2</a>
                             </li>
                         </ul>
                         <a class="close-link">
                             <i class="fa fa-times"></i>
                         </a>
                     </div>
                 </div>
                 <div class="ibox-content">
                 <div class="row">
                 	<div class="col-lg-4">
                            <div class="panel panel-primary">
                                <div class="panel-heading text-center">
                                    <h3>${reMap.topicMap.title }</h3>
                                </div>
                                <div class="panel-body">
                                 <address>
                          		<strong>投票类型</strong><br>
                           	<c:choose>
                           		<c:when test="${reMap.topicMap.type eq '0'}">单选</c:when>
                           		<c:otherwise>多选</c:otherwise>
                           	</c:choose>
                        </address>
						<address>
                           	<strong>投票权限</strong><br>
                           	<c:choose>
                           		<c:when test="${reMap.topicMap.scope eq '0'}">任何人可投</c:when>
                           		<c:otherwise>会员可投</c:otherwise>
                           	</c:choose>
                        </address>
						<address>
                           	<strong>投票截止时间</strong><br>
                           	${reMap.topicMap.deadline}
                        </address>
						<address>
                            <strong>我的选择</strong><br>
                           	<ol>
                           	<c:choose>
                           		<c:when test="${fn:length(reMap.optionMap) >0 }">
		                           	<c:forEach items="${reMap.optionMap}" var="opList">
			                            <li>${opList.content }</li>
		                           	</c:forEach>
                           		</c:when>
                           		<c:otherwise>
                           			<span class="badge badge-primary">您未进行过投票</span>
                           		</c:otherwise>
                           	</c:choose>
                        	</ol>
                      		</address>
                                </div>
                            </div>
                            <c:if test="${sessionScope.LOGINED_USER.uid eq reMap.topicMap.uid}">
	                            <div class="form-group text-center" id="btnId">
	                                 <button class="btn btn-block btn-outline btn-primary" type="button"><i class="fa fa-file-excel-o"></i>&nbsp;导出投票结果</button></button>
	                          	</div>
                          	</c:if>
                        </div>
			<div class="col-lg-8" id="resultHighCharts">
			</div>
		</div>
		</div>
             </div>
         </div>
     </div>
    </div>
	<form name="form1" target="_blank"></form>
	<js>
	
    <!-- highcharts -->
    <script src="${ctx}/resource/highcharts/highcharts.js"></script>
    <script src="${ctx}/resource/highcharts/highcharts-3d.js"></script>
    <script src="${ctx}/resource/highcharts/exporting.js"></script>
    
    <!-- iCheck -->
    <script src="${ctx}/resource/v2/js/icheck.min.js"></script>
    <!-- layer js -->
    <script src="${ctx}/resource/v2/layer/layer.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
        });
    </script>
    <script>
     $(function () {
	     $.ajax({
			type: "post",
			url: "${ctx}/vote/getResultData.do",
			data: "topicId="+"${reMap.topicMap.tid }",
			dataType:"json",
			success:function(data){
				var resultData = [];
				if(data.length == 0){
					resultData.push({
	                    name: "没有人进行投票",
	                    y: 0,
	                    sliced: true,
	                    selected: true
	                });
				}else{
					for(var i = 0;i < data.length;i++){
						if(i == 0){
							resultData.push({
	    	                    name: data[i].content,
	    	                    y: data[i].count,
	    	                    sliced: true,
	    	                    selected: true
	    	                });
						}else{
							resultData.push([data[i].content,data[i].count]);
						}
					}
				}
				
				Highcharts.setOptions({
		             lang: {printChart:'打印图表',
		                downloadJPEG: '下载JPEG 图片', 
		                downloadPDF: '下载PDF文档',
		                downloadPNG: '下载PNG 图片',
		                downloadSVG: '下载SVG 矢量图', 
		                contextButtonTitle: '导出图片' 
		             }
		         });
				 var chart = new Highcharts.Chart({
				     chart: {
				         renderTo: 'resultHighCharts',
				    	 type: 'pie',
				         options3d: {
				             enabled: true,
				             alpha: 45,
				             beta: 0
				         }
				     },
				     title: {
				         text: '${reMap.topicMap.title }'
				     },
				     tooltip: {
				         pointFormat: '{series.name}: <b>{point.y}</b>'
				     },
				     plotOptions: {
				         pie: {
				             allowPointSelect: true,
				             cursor: 'pointer',
				             depth: 35,
				             dataLabels: {
				                 enabled: true,
				                 format: '{point.name}:<b>{point.y}</b>'
				             }
				         }
				     },
				     series: [{
				         type: 'pie',
				         name: '票数',
				         data: resultData
				     }]
				 });
			},
			error:function(d){
				layer.close(load);
				console.log(JSON.stringify(d));
			}
		});
	    $(":button").click(function(){
	    	var load = layer.load(0);
	    	$.ajax({
				type: "post",
				url: "${ctx}/vote/exportExcel.do",
				data: "topicId="+"${reMap.topicMap.tid }",
				dataType:"json",
				success:function(data){
					layer.close(load);
					if(data.status == 'error'){
						layer.msg("导出excel出现了问题，请联系管理员", {time: 2000, icon:6});
					}else{
						var a = '<p class="text-info">如果您的浏览器没有弹出下载框请点击<a href="${ctx}'+data.filePath+'" target="_blank">这里</a>下载</p>';
						$("#btnId").children("button").nextAll().remove();
						$("#btnId").append(a);
						var form = $("[name='form1']");
						form.attr("action","${ctx}"+data.filePath);
						form.submit();
					}
				},
				error:function(d){
					layer.close(load);
					console.log(JSON.stringify(d));
				}
			});
	    });
	     
	});
    </script>
    
    </js>
    
</body>

</html>
